<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>员工信息列表</title>
		<style type="text/css">
			#app {
				width: 600px;
				margin: 20px auto;
				text-align: center;
			}

			table,
			td,
			th {
				border-collapse: collapse;/* 合并边框模型 */
				border-spacing: 0;/* 边框间距 */
			}

			table {
				border: 100%;
				margin: 0 auto;
			}

			td,
			th {
				border: 1px solid #bcbcbc;
				padding: 5px 10px;
			}

			th {
				background: #42b983;
				font-size: 1.2rem;
				font-weight: 400;
				color: #fff;
				cursor: pointer;
				width: 100px;
			}

			tr:nth-of-type(odd) {
				/* 设置下标为偶数的tr背景颜色 */
				background: #fff;
			}

			tr:nth-of-type(even) {
				/* 设置下标为奇数的tr背景颜色 */
				background: #eee;
			}

			caption {
				font-size: 24px;
				font-weight: bolder;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<table border="1" cellspacing="1" cellpadding="1">
				<caption>{{title}}</caption>
				<thead>
					<tr>
						<th>序号</th>
						<th>姓名</th>
						<th>年龄</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(item,index) in empList">
						<td>{{item.id}}</td>
						<td>{{item.name}}</td>
						<td>{{item.age}}</td>
					</tr>
				</tbody>
			</table>
		</div>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data: {
					title: "员工信息列表",
					empList: [{
						id: 1,
						name: "张三",
						age: 20
					}, {
						id: 2,
						name: "李四",
						age: 21
					}, {
						id: 3,
						name: "王五",
						age: 22
					}, {
						id: 4,
						name: "赵六",
						age: 23
					}, {
						id: 5,
						name: "钱七",
						age: 24
					}]
				}
			})
		</script>
	</body>
</html>
